<template>
	<view class="content b-t">
		<uni-nav-bar fixed left-icon="back" title="地址管理" :rightText="addressList.length?rightText:''" @right="onRight"></uni-nav-bar>
		<view class="list b-b" v-for="(item, index) in addressList" :key="index">
			<view class="wrapper" @click="checkAddress(item)">
				<view class="address-box">
					<text v-if="item.isDefault == 1" class="tag">默认</text>
					<text class="address">{{item.address}}</text>
				</view>
				<view class="u-box">
					<text class="name">{{item.contactName}}</text>
					<text class="mobile">{{item.contactPhone}}</text>
				</view>
			</view>
			<uni-icons v-if="rightShow" type="compose" size="44" color="#999" @click="addAddress('edit', item)"></uni-icons>
			<radio-group v-else @change="checkboxChange">
				<label class="uni-list-cell uni-list-cell-pd">
					<radio :value="item.id" :checked="index === current" color="#6CB041"/>
				</label>
			</radio-group>
		</view>

		<!-- 登录提示 -->
		<uni-login-model></uni-login-model>

		<pay-btn v-if="rightShow" btnShow btnText="新增地址" @separateTo="addAddress('add')"></pay-btn>
		<pay-btn v-else btnShow btnText="删除" backGround="#dd524d" @separateTo="delAddress"></pay-btn>
	</view>
</template>

<script>
    import uniIcons from '@/components/uni-icons/uni-icons.vue'
    import payBtn from '@/components/payBtn/index.vue'
    import uniLoginModel from '@/components/uni-login-model/uni-login-model.vue'

    export default {
        components: {
            uniIcons, payBtn, uniLoginModel
        },
        data() {
            return {
                source: 0,
                addressList: [],
                listQuery: {
                    pageNum:1 ,
                    pageSize: 10
                },
                rightText: '编辑',
                rightShow: true,
                checkList: [],
                current: undefined,
                userId: ''
            }
        },
        onLoad(option){
            console.log(option.source);
            this.source = option.source;
            this.getList()
        },
        methods: {
            getList() {
                this.$api.api('ship.list',this.listQuery).then(res => {
                    if (res.code == 200) {
                        this.addressList = res.data.list
                        for (var i = 0, lenI = this.addressList.length; i < lenI; ++i) {
                            this.addressList[i].id = String(this.addressList[i].id)
                        }
                    } else {
                        this.$api.msg(res.message)
                    }
                })
            },
            //选择地址
            checkAddress(item){
                if(this.source == 1){
                    this.$api.prePage().addressData = item;
                    this.$api.prePage().loginWay = 1;
                    uni.navigateBack({delta:1})
                }
            },
            addAddress(type, item){
                uni.navigateTo({
                    url: `/pages/perform/addressManage?type=${type}&data=${JSON.stringify(item)}`
                })
            },
            //添加或修改成功之后回调
            refreshList(data, type){
                //添加或修改后事件，这里直接在最前面添加了一条数据，实际应用中直接刷新地址列表即可
                this.addressList.unshift(data);
            },
            delAddress() {
                let than = this
                uni.showModal({
                    content: '确定要删除该地址吗？删除不可恢复',
                    success: (e)=>{
                        if(e.confirm){
                            uni.request({
                                url: `ship/address/delete/${this.userId}`,
                                method: 'POST',
                                header: {'content-type': 'application/json', 'Authorization': 'Bearer ' + uni.getStorageSync('token')},
								success: (res)=> {
                                    if (res.data.code == 200) {
                                        than.getList()
									} else {
                                        than.$api.msg(res.data.message)
									}
								},
								fail: (error)=> {
                                    console.log('error' + error)
                                    than.$api.msg(error.message)
								}
                            })
                        }
                    }
                });
            },
            onRight() {
                if (this.rightShow) {
                    this.rightShow = false
                    this.rightText = '完成'
                } else {
                    this.rightShow = true
                    this.rightText = '编辑'
                }
            },
            checkboxChange(e) {
                for (let i = 0; i < this.addressList.length; i++) {
                    if (this.addressList[i].id === e.detail.value) {
                        this.current = i;
						this.userId = e.detail.value
                        break;
                    }
                }
            }
        }
    }
</script>

<style lang='scss'>
	$base-color: #6CB041;
	$font-color-light: #909399;
	page{
		padding-bottom: 120upx;
	}
	.content{
		position: relative;
	}
	.list{
		display: flex;
		align-items: center;
		padding: 20upx 30upx;;
		background: #fff;
		position: relative;
		border-top: 2rpx solid #eee;
		margin-top: 2rpx;
	}
	.wrapper{
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	.address-box{
		display: flex;
		align-items: center;
		.tag{
			font-size: 24upx;
			color: $base-color;
			margin-right: 10upx;
			background: #fff;
			border: 1px solid #6CB041;
			border-radius: 4upx;
			padding: 4upx 10upx;
			line-height: 1;
		}
		.address{
			font-size: 30upx;
			color: $font-color-dark;
		}
	}
	.u-box{
		font-size: 28upx;
		color: $font-color-light;
		margin-top: 16upx;
		.name{
			margin-right: 30upx;
		}
	}
	.icon-bianji{
		display: flex;
		align-items: center;
		height: 80upx;
		font-size: 40upx;
		color: $font-color-light;
		padding-left: 30upx;
	}
</style>
